<!-- #layout name=default -->
<div id="main" class="fixed" v-cloak>
    <div class="page-header">
        <template v-if="isNewCode">
            <h1 class="title pull-left" >{{Kooboo.text.common.Script + ': '}}</h1>
            <button @click="formatCode" type="button" class="btn btn-default pull-right">Format code</button>
            <div class="col-md-3" >
                <div class="row form-group">
                    <div v-kb-hint="nameValidateModel.msg" class="input-group" data-container="body">
                        <input
                                v-model="name" type="text" placeholder="Name" class="form-control">
                        <span class="input-group-addon dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                {{'.' + extension}}
                                <i class="fa fa-angle-down"></i>
                            </a>
                            <ul class="dropdown-menu" >
                                <li v-for="item in supportExtensions" style="cursor: pointer"><a @click="changeExtensions($event,item)">{{item.displayName}}</a></li>
                            </ul>
                    </span>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <h1 class="title pull-left">Script<span>:</span>
                <strong :title="name">{{name}}</strong>
            </h1>
            <button  @click="formatCode" type="button" class="btn btn-default pull-right">Format code</button>

        </template>
    </div>

    <div class="block-fullpage with-buttons">
        <div class="block-visual-editor default">
            <kb-code-editor ref="editor" :code.sync="codeContent" :lang="lang"></kb-code-editor>
        </div>
    </div>
    <div class="page-buttons">
        <div class="btn-group dropup">
            <button @click="onSaveAndReturn" class="btn green" style="margin:0;">Save & Return</button>
            <a class="btn green dropdown-toggle" data-toggle="dropdown" style="margin:0;min-width:auto;"><i class="fa fa-angle-up"></i></a>
            <ul class="dropdown-menu" role="menu">
                <li><a @click="onSave">Save</a></li>
            </ul>
        </div>
        <a  @click.stop="onCancel" class="btn gray">Cancel</a>
    </div>
</div>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/components/kb-code-editor.js"
        ]);
    })()
</script>
<script src="/_Admin/View/Development/Script.js"></script>
